<template>
	<view >
		<my-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">房源编辑</block>
		</my-header>
		<view class="fron">
            <block v-for="(item,index) in init" :key="index">
                <!--  -->
                <view class="cu-form-group " :class="item.type=='area'?'align-start':''" >
                    <view class="title">{{item.name}}</view>
				    <input v-if="item.type=='text'"  :placeholder="'请输入'+item.name" v-model="item.val" style="text-align:left;"/>
                    <textarea v-if="item.type=='area'" maxlength="-1" v-model="item.val"  :placeholder="'请输入'+item.name"></textarea>
                </view>
            </block>
            <view class="cu-form-group">
				<view class="title">楼层</view>
				<input placeholder="总楼层" v-model="formData.floor_sum" name="input" style="flex:.7; text-align:left;" />
                <view class="br" style="margin-right:15rpx;">/</view>
				<input placeholder="当前楼层" v-model="formData.floor_cur" name="input" style="text-align:left;"/>
                <view style="margin-left:280rpx;"></view>

			</view>
            <view class="cu-form-group" >
				<view class="title">地址</view>
				<input placeholder="请选择房源地址" :disabled="true"  v-model="formData.address" name="input"/>
				<text class='cuIcon-locationfill text-orange' @click="addAddress()"></text>
			</view>
            
            <view class="cu-form-group ">
				<view class="title">户型</view>
				<picker @change="PickerChange" data-key="house_type" :data-data="house_types" :value="house_type" :range="house_types">
					<view class="picker">
						{{formData.house_type?formData.house_type:'请选择户型'}}
					</view>
				</picker>
			</view>
            <view class="cu-form-group ">
				<view class="title">出租类型</view>
				<picker @change="PickerChange" data-key="rent_type" :data-data="rent_types" :value="rent_type" :range="rent_types">
					<view class="picker">
						{{formData.rent_type?formData.rent_type:'请选择出租类型'}}
					</view>
				</picker>
			</view>
            <view class="cu-form-group ">
				<view class="title">标签</view>
				<picker @change="addTag" data-key="tag" :data-data="tag_list" :value="tag" :range="tag_list">
					<view class="picker">
						{{formData.tag?formData.tag:'请选择房源标签'}}
					</view>
				</picker>
			</view>
            <view class="wrap" v-if="formData.tags[0]">
                <view class="tag_list row">
                    <view class="tag row" v-for="(item,index) in formData.tags" :key="index" @click="delTag(item)">
                        {{item}}
                    </view>
                </view>
            </view>
            <view class="cu-form-group ">
				<view class="title">房屋简介</view>
				<picker @change="addTag"  :disabled="true" data-key="tag" :data-data="tag_list" :value="tag" :range="tag_list">
					<view class="picker">
						<view class="action" style="text-align:right;" @click="go('/tools/editor/editor')">
                            编辑简介
				        </view>
					</view>
				</picker>
			</view>
			<view class="cu-form-group" v-if="text">
                <rich-text :nodes="formData.content"></rich-text>
			</view>
            <view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in show_imgList" data-key="show_imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" data-key="imgList" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" data-key="imgList" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
        </view>
        <view class="col">
            <view class="cu-btn round lg bg-cyan btn" @click="submit()">提交反馈</view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                house_types:[],
                rent_types:["整租","主卧","次卧"],
                tag_list:[],
                formData:{
                    title:"",
                    area:"",
                    price:"",
                    floor_sum:"",
                    floor_cur:""
                },
                init:[
                    {
                        key:"username",
                        name:"用户名",
                        type:"text",
                        val:""
                    },
                    {
                        key:"info",
                        name:"简介",
                        type:"area",
                        val:""
                    }
                ],
                house_type:"",
                rent_type:"",
                tag:"",
                tags:[],
                content:"",
                text:"",
                back_type:"",
                imgList:[],
                show_imgList:[]
			}
		},
		onLoad(options) {
            this.initData(options.id)
            this.house_types=uni.$handle.get_houseType()
            this.tag_list= uni.$handle.get_tagList()||[]
            this.formData=uni.getStorageSync('houseList')[1]
            getApp().globalData.content={
                html:this.formData.content,
                text:"a"
            }
        },
        onShow(){
            let content= getApp().globalData.content
            this.formData.content=content.html||this.formData.content
            this.text=content.text=="\n"?"":content.text
            // this.text=content.text||this.text
        },
        onHide(){
        },
		methods: {
            ...uni.$input,
            go(url){
                 uni.navigateTo({
                    url
                });
            },
			async initData(id){
				const res=await uni.$request({
                    id
                },"house/index/getHouseInfo")
                this.formData=res.data
                this.show_imgList=res.data.imgList
				console.log(res);
            },
            addTag(e){
                this.PickerChange(e)
                let tags=this.formData.tags||[]
                let tag=this.formData.tag
                let is_tag=tags.includes(tag)
                if (is_tag) {
                    uni.$err("请不要添加重复标签") 
                    this.formData.tag=""
                }else{
                    this.$set(this.formData,"tags",[
                            ...tags,tag
                        ])
                }
                
            },
            delTag(tag){
                 this.formData.tags=this.formData.tags.filter((item)=>item!=tag)
            },
            addAddress(){
                uni.chooseLocation({
                    success:(res)=>{
                        this.formData={
                            ...this.formData,
                            ...res
                        }
                    }
                })
            },
            async submit(){
                const formData=this.formData
                // const houseList=uni.getStorageSync('houseList')||[]
                // uni.setStorageSync('houseList', [
                //     ...houseList,
                //     formData
                // ])
                // uni.$err("添加成功",1)
                const res=  await uni.$request({
                    ...formData
                },'house/index/addHouseInfo')
                if (res.code==200) {
                    uni.$err("添加成功",1)
                }else{
                    uni.$err(res.msg)
                }
                console.log(formData);
            }
		}
	}
</script>

<style lang="scss">
    // @import "../../components/house/house";
    .title{
        width: 150rpx;
    }
    .picker{
        text-align: left !important;
    }
    .wrap{
       width: 750rpx;
       background: #ffffff;
       padding:20rpx 30rpx;
       padding-top: 10rpx;
       .tag_list{
           .tag{
            zoom: 1.5;
            margin-bottom: 10rpx;
           }
       }
    }

     .container {
        padding: 10px;
    }
    #editor {
        width: 100%;
        height: 300px;
        background-color: #CCCCCC;
    }
    button {
        margin-top: 10px;
    }
</style>